To get started, import the reference files I provided.
Then, make a folder in Home and call it the title of your game.
Inside that folder, make 3 folders called background, audio, and sprites.
Pretty self explainatory for what goes in them lol.
Next, make 2 new files called style.css and ui.js.
Back in Home, make another file called your_game_title_here.html
(this is the file you'll be hosting your game in!).
In the reference files, edit html.html.
↓
Now Editing: html.html
This file contains all the basic copy-paste stuff you need for your game!
If you want to see a visual example of them in action, click View.
Before you start adding dialog and such, copy the beginning and end to your own html file
(if you're confused, you can just copy the example below).
Copy
↓
Now Editing: your_game_title_here.html
Now, your games html file should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML for dumbasses (me im dumbasses)</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="ui.js"></script>
</head>
<body>
<div id="container">
<figure>
<div id="bg">
<img class="bgimg">
</div>
<div id="sprite">
<img class="spimg">
</div>
<div id="preload">
<-- bg -->
<img src="">
<-- sprite -->
<img src="">
<-- audio -->
<audio src="">
</div>
</figure>
<div id="textbox">
<-- begin start -->
<footer>
<div id="nav">
<div id="prev">< prev</div>
< id="next">next ></div>
</div>
</footer>
</div> <-- end textbox -->
</div> <-- end container -->
<div id="toggle">turn off dialog box</div>
</body>
</html>
Still need to do some stuff! First, look under <head> (its near the top).
To added a title to your game, change whats inbetween <title></title>.
Under that, you should see <link href="style.css".
Change "style.css" to "/your game name here/style.css".
Also in <script src=, change "ui.js" to "/your game name here/ui.js".
Alright, under <body> there's a section called <div id="container">. Under that you should see <div id="preload">.
This is what preloads all your images!
Add <img src="/your game name here/sprites/spritename.png"> for each sprite.
Same thing for background and audio (but change 'sprites' to background and audio obv.)
At the bottom of your file, theres a section labeled toggle.
It's just a button for hiding the textbox if the player wants to, but you can delete it if you want.
Save
↓
Now Editing: style.css
We still got more foreplay before starting your game!! This file contains the code that tells your game what things look like. Color, position, size, stuff like that. Copy everything from the reference file over to your own style.css file.
At the top, you can change the font used in your game (make sure to look up html compatable fonts!). You'll see color: there too, change it to whatever hex color you like.
Btw, this doesn't affect the Narrator or Player dialog color, that's in a different section. This is only for Character dialog.
Scroll down to /***** dialog *****/ and here you'll see the narrate and speak options, as well as a couple more options too. #textbox is for editing the color and style of your text container!
You can even change the background to an image if you want, just change it to "background: url (link here);".
If you want to use a custom shape and image for your textbox instead, get rid of everything from width to background under #textbox (dont delete font!).
Type img after #textbox, so it looks like '#textbox img {'.
Change position: relative; to position: absolute;.
Note for making your custom textbox!!! Make sure it isn't larger than 880 x 120px!!!! You wont be linking it here, but you will in the next file I'm explaining, ui.js!
Save
↓
Now Editing: ui.js
This section is very important, it holds the data of routes and general fuctions of your game. Copy everything into your own ui.js file!
Near the top, you should see some routes already there, used in the tutorial. You can delete everything underneath var start.
'start' is the title of your first route!
Routes are added everytime the player has to make a choice. You can have them go on an entirely seperate path every choice, or you can have a couple scenes of dialog and just send them back to the main story (the html.html file shows how to send the player to different routes, but I'll explain each thing later on too if you're confused ^^). Everytime a new set of dialog/text is said, the number on the route goes up. Ex; start01, start02, start03, ect.
This isn't the only place you need to put your routes! Scroll down a bit and you should see fuction whichArray() {, as well as some routes too. First route starts with 'if', the rest are 'else', pretty simple. Just stick to the format provided and it should work fine! Don't forget to do the same thing for function Next and function Prev too!!
Now, scroll to function ChangeMedia() {. Add /your game name here/sprites and /your game name here/backgrounds between the " " after var usp and var ubg.
Hey you who wanted a custom textbox!!!! Here's the part where you learn how to add it!!! (If this isn't you, skip this section)
Under var bg, add var custombox = $("#custombox");.
Under var ubg, add var ucb = "/your game name here/sprites";. Make sure your textbox image is in the sprites folder, and has cb- before the name.
Under Sound() ; add this:
function Custombox() {
var cbimg = cb.find(".cbimg");
var i = classes[1];
if (i != "sp-x") {
cbimg.show();
cbimg.attr("src", ucb + i + ".png");
} else {
cbimg.hide();
}
}
Custombox();
Congrats! You got your own textbox now :]
(AN: i havent actually tested this out yet so pls tell me if it works if you end up using it)
Save
↓
yourgamenamehere.html
(and html.html in another tab)
Here's the detailed breakdown of using stuff from html.html for people who dont really know html that much :P
Make sure to change the article id to id="routenamehere" after you paste!!
Custom Player Name:
In the first route (under <-- begin start --> ) theres the code needed for showing input box the player would type their name into.
This doesn't have to be at the beginning of the game ofc, you can paste it where-ever you want! You can replace 'Your name?' to something else if you want, as well as the 'Click next :)'.
To have a character say the players name, use <span class="player"></span>.
Example; Hello <span class="player"></span>!
Custom Answers:
If you want a different question, like fav color or something, there's a couple extra steps. Here, instead of explaining each thing you need to change, I'll show an example with all the changes:
<article id="start01" class="bg-x sp-x show">
<div class="dialog">
Fav color?<p/>
<input type="text" value="Color" id="favcolor">
<input type="submit" value="Submit" onclick="favcolorset.style.display='inline', SetFavcolor();"><p/>
<span id="favcolorset" style="display:none;">Click next :)</span>
</div>
</article>
Next, go to your ui.js. Right at the top is the code for player, so you'll be pasting this underneath it:
function SetFavcolor() {
$('.favcolor').replaceWith($('#favcolor').val());
}
And, for when a character uses the custom word, put <span class="favcolor"></span>.
Just replace all the favcolor stuff with the words related to your question, and you're done!
Dialog:
Theres a couple different options for showing dialog!
There's dialog (used for when a character is speaking), dialog narrate (used for the narrator), dialog speak (used when the player or protag is speaking), and dialog end (used for an ending).
Define which type of dialog you're using in the <div class=, and put your dialog text below it like it's shown in html.html!
You can use <b> and <i> for bold and italics, too.
Remember to put </b> or </i> at the end!
Custom Colored Dialog:
haha you're a homestuck lol
Alright you're gonna have to go back to style.css for this.
Above #textbox ul { paste this:
.characternamehere {
color: #FF0064;
font-weight: bold;
font-style: italic;
font-family: Arial, sans-serif;
Change characternamehere to your characters name, change the color hex code (google it if you dont know), change the font family too if you want!
Currently it's set to both bold and italic, so if you don't want those you can delete font-style: italic; and font-weight: bold;.
So now, instead of using <div class="dialog"> in your html, you'd put your characters name where "dialog" is, and they speak in their own custom color!
(AN: i havent actually tested this out yet so pls tell me if it works if you end up using it)
Showing Background and Characters:
After route id you'll see class=, which is where you put your background and character (and custom textbox if you have one).
Replace bg-x and sp-x with the sprite names (without the .png part, just the name).
Yes, you have to paste the background every time there's a new dialog.
Your custom textbox is the samething, just with cb-x.
If there's no background or character on screen, that's when you put bg-x and sp-x.
Choices:
Setting a choice option is pretty simple, basic copy pasting of this after your dialog:
<ul>
<li class="op xsomewhere">>; choice1</li>
<li class="op xsomewhereelse">>; choice2</li>
</ul>
The choice1 and choice2 are the choice button text, while the xsomewhere is the route it leads to.
Like, if you wanted to go back to start, you'd put <li class="op xstart">, easy right?
Oh yeah, you don't know how to make a route yet do you?? I'll explain it in the next part-
Routes:
To keep track of each route, put <-- begin routenamehere --> (use ! after the <, I can't for the tutorial or else it hides it) above it.
You dont have to, but it can make routes a bit easier to find.
Then, put your dialog stuff (article id, div, etc.) below it!
Everytime there's a new route, the article id changes too. So instead of "start01" it'd be "somethinghappened01".
Don't forget to add each route to your ui.js file!
Full Choice Screen (only choices):
Scroll to <-- begin chooseroute -->. You can have a custom background (bg) but make suresp is sp-x.
Please tell me you can read. Because html.html<.font> basically explains it all for you. Also, don't change the illchoose parts of the code!!
To change the look of the boxes, go to your style.css, then find #textbox.illchooseT.
Underneath there should be a bunch of illchoose sections, so feel free to mess around with them and test things out! Just dont change the names, only the numbers/colors/fonts, ok?
Audio and Music:
Under <-- begin startc --> in html.html is an example of how to implement audio. Change the <audio src part to this:
<audio src="/your game name here/audio/audioname.mp3" hidden></audio>
And it should play!
If it's background music and you want it to loop, put loop after hidden.
If the music changes, add muted=True after hidden and below add another <audio src with your new song.
(AN: i havent actually tested this out yet so pls tell me if it works if you end up using it)
Q & A:
Q: My background isn't showing up!
A: If you're using a url, try finding a url that ends with .png. If it's a custom one, than make sure it ends in .png, is in the background folder, starts with sp-, spelled correctly in your code, and is added to preload.
Q: My images aren't showing up!
A: Check if they have sp- before the name/are in .png (make sure to check if the png is lowercase, if it isnt you can rename it)/added to preload/spelled correctly in your code/are in the sprite folder
Q: I want my game to be bigger, how do I do that?
A: Go to css.css, near the top there should be a section called '#container', change the height and width px amount to the one you want!
Q: My next/prev buttons aren't working!
A: Check in ui.js, are all the versions of your route there? Dont forget to add them to function whichArray, function Next, and function Prev!
Q: My dialog doesn't start at the next line! I used </p> like you said!!
A: No, I said <p/>. / after the p. Try that out instead!
Q: I'm illiterate and can't read!
A: Me too. Still figuring that one out.
Q: I want a title screen, how do I code that?
A: Coming soon!!
Q: Can I added transitions and effects?
A: Also coming soon!!